<template>
  <div class="bg">
    <div class="formBox">
      <h3>管理系统</h3>
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        status-icon
        :rules="loginRules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginForm.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";
import { ElMessage } from "element-plus";
import {useStore} from "vuex";
const store = useStore();
const loginForm = reactive({
  username: "",
  password: "",
});
const loginFormRef = ref();
const loginRules = reactive({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入用户名", trigger: "blur" }],
});

const router = useRouter();
const submitForm = () => {
  // 校验表单
  loginFormRef.value.validate(async (valid) => {
    console.log("valid", valid);
    if (valid) {
      // localStorage.setItem('token','11');
      let res = await axios.post("/adminapi/user/login", loginForm)
        console.log("res", res);
        if (res.data.ActionType == "OK") {
          store.commit("changeUserInfo", res.data.data);
          store.commit("changeGetterRouter",false);
          router.push("/index");
        } else {
          ElMessage.error("密码或用户名错误");
        }
    }
  });
  // 提交后台
  // 设置token
};
</script>

<style lang="scss" scoped>
// #app {
//     background-color: #0dbc79;
//     height: 100%;
//     width: 100%;
// }
// .bg {
//     background-color: #0dbc79;
//     height: 100%;
//     width: 100%;
// }
.formBox {
  width: 500px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: rgba($color: #000000, $alpha: 0.5);
  padding: 20px;

  h3 {
    color: white;
    font-size: 30px;
    text-align: center;
    margin-bottom: 20px;
  }
}

::v-deep .el-form-item__label {
  color: white;
}
</style>